import type { Contact } from "../../types";

interface MessageBubbleProps {
  message: {
    id: string;
    senderId: string;
    content: string;
    timestamp: Date;
  };
  sender: Contact;
  isOwnMessage: boolean;
  avatarText: string;
  bubbleRef: (el: HTMLDivElement | null) => void;
  onTouchStart: () => void;
  onTouchEnd: () => void;
  onTouchMove: () => void;
  onContextMenu: (e: React.MouseEvent) => void;
}

export default function MessageBubble({
  message,
  sender,
  isOwnMessage,
  avatarText,
  bubbleRef,
  onTouchStart,
  onTouchEnd,
  onTouchMove,
  onContextMenu,
}: MessageBubbleProps) {
  return (
    <div
      ref={bubbleRef}
      className={`flex items-start ${
        isOwnMessage ? "justify-end" : "justify-start"
      } my-3 px-4`}
      onTouchStart={onTouchStart}
      onTouchEnd={onTouchEnd}
      onTouchMove={onTouchMove}
      onContextMenu={onContextMenu}
    >
      {!isOwnMessage && (
        <div className="avatar mt-1 flex-shrink-0">
          <div className="flex items-center justify-center w-12 h-12 rounded-full bg-gray-300">
            <span className="text-xl font-bold text-gray-700">
              {avatarText}
            </span>
          </div>
        </div>
      )}

      <div
        className={`flex flex-col ${
          isOwnMessage ? "items-end" : "items-start"
        } ${isOwnMessage ? "mr-2" : "ml-2"} max-w-[80%]`}
      >
        {!isOwnMessage && (
          <div className="text-sm font-semibold mb-1 text-gray-600">
            {sender.name}
          </div>
        )}

        <div
          className={`
            px-4 py-2 rounded-2xl
            ${
              isOwnMessage
                ? "bg-blue-500 text-white rounded-br-none"
                : "bg-gray-100 text-gray-800 rounded-bl-none"
            }
            break-words
          `}
          style={{
            minWidth: "80px",
            wordBreak: "break-word",
          }}
        >
          {message.content}
        </div>
      </div>

      {isOwnMessage && (
        <div className="avatar mt-1 flex-shrink-0">
          <div className="flex items-center justify-center w-12 h-12 rounded-full bg-gray-300">
            <span className="text-xl font-bold text-gray-700">
              {avatarText}
            </span>
          </div>
        </div>
      )}
    </div>
  );
}
